<template>
  <div class="createChildMenuDialog">
    <el-dialog
      :title="isEditSubMenu?'编辑子菜单':'新建子菜单'"
      v-model="visible"
      width="640px"
      :show-close="true"
      @close="Closed()">
      <div class="content">
        <el-form label-position="left" label-width="94px" :model="form" ref="ruleForm" :rules="rules">
          <el-form-item label="所属菜单" prop="parentName">
            <el-input v-model="form.parentName" disabled style="width: 420px;" placeholder="请输入分组名称" />
          </el-form-item>
          <el-form-item label="子菜单名称" prop="name">
            <el-input v-model="form.name" style="width: 420px;" placeholder="请输入分组名称" />
          </el-form-item>
          <!-- <el-form-item label="查询条件">
            <el-select v-model="from.name" class="m-2" placeholder="Select">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item> -->
          <el-form-item label="排序" prop="sort">
            <el-input v-model="form.sort" style="width: 420px;"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="footer">
          <el-button size="mini" @click="Closed">取消</el-button>
          <el-button size="mini" type="primary" @click="handleClickConfirm('ruleForm')">保存</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ElMessage, ElMessageBox } from "element-plus";
import { dataSaveSubMenuApi, dataEditSubMenuApi } from '@/api/dataCenter/dataMenu.js'
export default {
  name: 'CreateChildMenuDialog',
  props: {
    visible: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    rowData: {
      type: Object,
      default: () => {
        return {};
      }
    },
    rows: {
      type: Object,
      default: () => {
        return {};
      }
    },
    isEditSubMenu: {
      type: Boolean,
      default: () => {
        return false;
      }
    }
  },
  data() {
    return {
      form: {
        name: '',
        parentId: null,
        attributes: '',
        sort: '',
        parentName: '',
        id: ''
      },
      rules: {
        parentName: [{ required: true, message: '请输入分组菜单名称', trigger: 'blur' }],
        name: [{ required: true, message: '请输入分组子菜单名称', trigger: 'blur' }],
      },
      options: []
    }
  },
  watch: {
    visible: {
      handler(val) {
        if(val && !this.isEditSubMenu) {
          this.$nextTick(() => {
            this.$refs.ruleForm.resetFields();
            this.form.parentName = this.rowData.name
          })
        }
      },
      deep: true
    },
    isEditSubMenu: {
      handler(val) {
        this.$nextTick(() => {
          if(val) {
            this.form.name = this.rows.name;
            this.form.parentName = this.rows.parentName;
            this.form.sort = this.rows.sort;
            this.form.id = this.rows.id;
            this.form.parentId = this.rows.parentId;
          }
        })
      },
      deep: true
    }
  },
  mounted() {
    
  },
  methods: {
    // 修饰关闭dialog
    Closed() {
      this.$emit('update:visible', false);
    },
    // 新建父菜单Api
    async dataSaveSubMenuApiData() {
      let res = await dataSaveSubMenuApi({
        id: null,
        name: this.form.name,
        sort: this.form.sort,
        parentId: this.rowData.id
      });
      if(res.code === 200) {
        ElMessage({
          type: "success",
          message: "新建菜单组成功",
        });
        this.Closed();
        this.$emit('handleSaveMenuSucc', true)
      }
    },
    // 编辑父菜单Api
    async dataEditSubMenuApiData() {
      let res = await dataEditSubMenuApi({
        id: this.form.id,
        name: this.form.name,
        sort: this.form.sort,
        parentId: this.form.parentId
      })
      if(res.code === 200) {
        ElMessage({
          type: "success",
          message: "更新菜单组成功",
        });
        this.Closed();
        this.$emit('handleSaveMenuSucc', true)
      }
    },
    // 确定
    handleClickConfirm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if(!this.isEditSubMenu) {
            this.dataSaveSubMenuApiData();
          } else {
            this.dataEditSubMenuApiData();
          }
        } else {
          return false;
        }
      });
    },
  }
}
</script>

<style lang="scss" scoped>
.createChildMenuDialog {
  .cardSize {
    width: 100%;
    height: 100px;
    &-top {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;
      .item {
        width: 190px;
        height: 100%;
        cursor: pointer;
        img {
          width: 100%;
          height: 100%;
        }
        .gary {
          opacity: .2;
          pointer-events: none;
        }
        .spanRadio {
          width: 100%;
          height: 20px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }
}
</style>

<style lang="scss">
.createChildMenuDialog {
  .el-dialog__header {
    padding: 10px 0 10px 24px;
    background: #F7F8FA;
    border: none;
    margin: 0;
    .el-dialog__title {
      color: #252934;
      font-size: 14px;
      line-height: 22px;
      word-wrap: break-word;
    }
    .el-dialog__headerbtn {
      width: 44px;
      height: 44px;
      top: 0;
      right: 0;
      .el-dialog__close {
        color: inherit;
      }
    }
  }
  .el-dialog__body {
    padding: 20px;
    .el-form-item {
      margin-bottom: 24px;
    }
    .el-form-item__label {
      font-size: 14px;
      color: #6b798e;
      margin-bottom: 4px !important;
    }
    .el-radio {
      width: 56px;
      height: 18px;
      margin-right: 8px;
    }
  }
}
</style>